<div
  ngCombobox
  #combobox="ngCombobox"
  class="example-combobox-container"
  [firstMatch]="firstMatch()"
  filterMode="highlight"
>
  <div class="example-combobox-input-container">
    <span class="material-symbols-outlined example-icon example-search-icon">search</span>
    <input
      ngComboboxInput
      class="example-combobox-input"
      placeholder="Search..."
      [(value)]="searchString"
    />
  </div>

  <div popover="manual" #popover class="example-popover">
    <ng-template ngComboboxPopupContainer>
      <ul ngTree #tree="ngTree" class="example-tree">
        <ng-template
          [ngTemplateOutlet]="treeNodes"
          [ngTemplateOutletContext]="{nodes: nodes(), parent: tree}"
        />
      </ul>
    </ng-template>
  </div>
</div>

<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
  @for (node of nodes; track node.name) {
    <li
      ngTreeItem
      [parent]="parent"
      [value]="node.name"
      [label]="node.name"
      [selectable]="!node.children"
      #treeItem="ngTreeItem"
      class="example-tree-item example-selectable example-stateful"
    >
      <span
        aria-hidden="true"
        class="material-symbols-outlined example-parent-icon example-icon"
        >{{node.children ? 'chevron_right' : ''}}</span
      >
      {{ node.name }}
      <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon"
        >check</span
      >
    </li>

    @if (node.children) {
      <ul role="group">
        <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
          <ng-template
            [ngTemplateOutlet]="treeNodes"
            [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
          />
        </ng-template>
      </ul>
    }
  }
</ng-template>
